<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ThreeJS示例01-ThreeJS基础</title>
    <script type="text/javascript" src="../../threejs/three.js" ></script>
    <link rel="stylesheet" href="../reset.import.css" />
  </head>
  <body>
    <h1>ThreeJS基础</h1>
    <div id="retina"></div>
    <script>
      
      window.onload = function() {
        createWorld();
      }
      //模拟现实场景
      function createWorld() {
          initRender();//创建渲染器
          initCamera();//创建相机
          initLight();//创建光源
          initObject();//创建物体

          initScene();//创建场景
          render();//渲染
      }

      var renderer;//渲染器
      var width;
      var height;
      function initRender() {
        width = window.innerWidth;
        height = window.innerHeight;
        renderer = new THREE.WebGLRenderer({
          antialias: true //抗锯齿开启
        })
        renderer.setSize(width, height) //设置渲染器宽度和高度
        renderer.setClearColor('#ccc', 1.0) //设置背景颜色
        renderer.setPixelRatio(window.devicePixelRatio) //设置设备像素比
        document.getElementById('retina').appendChild(renderer.domElement)  //把渲染器放置到页面中
      }

      var camera;
      var originPoint = new THREE.Vector3(0,0,0); // 原点
      function initCamera() {
        camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
        camera.position.set(200,400,600); // 设置相机位置
        camera.up.set(0,1,0); //设置相机正方向
        camera.lookAt(originPoint); // 设置相机视点
      }

      var pointLight;
      var ambientLight;
      function initLight() {
          //点光源
          pointLight = new THREE.PointLight( 0xffffff, 1, 2000 );
          pointLight.position.set(70, 112, 98);
          //环境光
          ambientLight = new THREE.AmbientLight( 0x333333 );
      }

      var cube;
      function initObject(){
          var geometry = new THREE.BoxGeometry( 100, 100, 100);
          var material = new THREE.MeshLambertMaterial( {color: 0xff0000} );
          cube = new THREE.Mesh( geometry, material );
          cube.position.set(0,0,0);
      }

      var scene
      function initScene() {
        scene = new THREE.Scene()
        scene.add(pointLight)
        scene.add(ambientLight)
        scene.add(cube)
      }

      function render() {
        renderer.clear()
        renderer.render(scene, camera)
        cube.rotation.x += 0.005
        cube.rotation.y += 0.005
        requestAnimationFrame(render)
      }


    </script>
  </body>
</html>
